<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Help Menu</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

<style>
:root {
  --bg: #1f2233;
  --fg: #e6e6e6;
  --accent: #1592FF;
  --panel-bg: #232637D9;
  --btn-hover: #2d3240F2;
  --card-border: #ffffff0D;
  --shadow-color: #00000066;
  --border-radius: 16px;
}

body {
  margin:0;
  padding:2rem 0;
  background:linear-gradient(135deg,#1f2233,#14172b);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
}

.title-bar{
  text-align:center;
  margin-bottom:1rem;
}
.title{
  font-size:2.4rem;
  font-weight:600;
  color:var(--accent);
  text-shadow:0 0 18px rgba(21,146,255,0.45);
}
.subtitle{
  font-size:1rem;
  opacity:0.75;
  font-style:italic;
}

.hud-card{
  background: var(--panel-bg);
  border:1px solid var(--card-border);
  box-shadow:0 0 25px rgba(0,153,255,0.22);
  border-radius: var(--border-radius);
  padding:2rem;
  width:75%;
  max-width:700px;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.hud-actions{
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
}

.btn{
  background:var(--panel-bg);
  border:1px solid var(--card-border);
  border-radius:var(--border-radius);
  font-weight:600;
  font-size:1.1rem;
  color:var(--fg);
  padding:1rem 1.6rem;
  cursor:pointer;
  flex:1 1 calc(50% - 1rem);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  gap:15px;
  transition: all 0.25s;
  box-shadow:0 0 20px rgba(21,146,255,0.18);
}

.btn:hover{
  background:var(--btn-hover);
  transform:scale(1.05);
  box-shadow:0 0 30px rgba(21,146,255,0.32);
}

.icon{
  font-family:"Material Symbols Outlined";
  font-size:70px;
  color:var(--accent);
  text-shadow: 0 0 14px rgba(21,146,255,0.6);
}

.toast{
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  background: var(--panel-bg);
  color: var(--fg);
  padding:14px 24px;
  border-radius:14px;
  opacity:0;
  transition: opacity 0.35s ease;
  z-index:999;
  font-size:1rem;
  border:1px solid var(--card-border);
}
.toast.show{opacity:1;}
</style>
</head>

<body>

<div class="title-bar">
  <div class="title">Help Menu</div>
  <div class="subtitle">Quick Actions & Useful Links</div>
</div>

<div class="hud-card">

  <div class="hud-actions">

    <button class="btn" onclick="openLink('https://t.me/TempMeow')">
      <span class="icon">bug_report</span>Report A Bug
    </button>

    <button class="btn" onclick="openLink('https://github.com/MeowDump/Integrity-Box')">
      <span class="icon">hub</span>Source Code
    </button>

    <button class="btn" onclick="openLink('https://t.me/MeowDump')">
      <span class="icon">groups</span>Help Group
    </button>

    <button class="btn" onclick="openLink('https://t.me/MeowRedirect')">
      <span class="icon">campaign</span>Updates Channel
    </button>

  </div>

</div>

<div id="toast" class="toast"></div>

<script>
function popup(msg, type="info") {
  try {
    if (typeof window.toast === "function") { window.toast(String(msg)); return; }
    if (window.kernelsu && typeof window.kernelsu.toast === "function") { window.kernelsu.toast(String(msg)); return; }
    if (typeof ksu === "object" && typeof ksu.toast === "function") { ksu.toast(String(msg)); return; }
  } catch {}

  // fallback DOM popup
  const n = document.createElement("div");
  n.className = "webui-popup";
  n.textContent = msg;
  const colors = { error:"#f44336", success:"#4caf50", info:"#1565c0", warn:"#ff8f00" };
  const bg = colors[type] || "#0099FF";
  Object.assign(n.style, {
    position:"fixed",top:"-70px",left:"50%",transform:"translateX(-50%)",
    background:bg,color:"#fff",padding:"0.8rem 1.2rem",borderRadius:"8px",
    boxShadow:"0 6px 18px rgba(0,0,0,0.35)",fontWeight:"600",zIndex:"99999",
    transition:"top 0.36s,opacity 0.36s",opacity:"0"
  });
  document.body.appendChild(n);
  requestAnimationFrame(()=>{ n.style.top="20px"; n.style.opacity="1"; });
  setTimeout(()=>{ n.style.top="-70px"; n.style.opacity="0"; setTimeout(()=>n.remove(),420); },2500);
}

function openLink(url){
  try {
    ksu.exec(`am start -a android.intent.action.VIEW -d ${url}`);
    popup("Redirecting to destination…");
  } catch(e){
    popup("Error: Unable to open link");
  }
}
</script>
</body>
</html>
